<template>
	<view class="content">
		<view class="success-view">
			<view class="success-font">
				<image src="../../static/img/success.png" class="success-icon"></image>
				<view class="">评价成功</view>
			</view>
			<view class="button-view">
				<view class="button-back" @tap="backHome">返回首页</view>
				<view class="button-query" @tap="queryComment">查看评论</view>
			</view>
		</view>
		<view class="recommend-view">
			<view class="recommend-top">
				<view class="line"></view>
				<view class="font">为您推荐</view>
				<view class="line"></view>
			</view>
			<view class="product-view">
				<view v-for="(item,index) in recommendProduct" :key="index" :class="[index%2==0?'product-item-left':'product-item-right']"
				 @tap="goProduct(item.id)">
					<image :src="item.image" class="product-image" mode="aspectFill" lazy-load></image>
					<view class="product-name text_two">{{item.name}}</view>
					<view class="product-price">
						<view class="product-price-rmb">￥</view>
						<view class="product-price-num">{{item.price}}</view>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	import api from "../../common/api.js"
	import {
		getWithParam_
	} from "../../common/request.js";
	export default {
		data() {
			return {
				recommendProduct: [],
				orderId: 0
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.getRecommendProduct()
		},
		methods: {
			queryComment() {
				uni.navigateTo({
					url: "./commentDetail?orderId=" + this.orderId
				})
			},
			goProduct(id) {
				uni.navigateTo({
					url: "../product/detail?id=" + id
				})
			},
			backHome() {
				uni.switchTab({
					url: "../home/index"
				})
			},
			getRecommendProduct() {
				getWithParam_(api.RECOMMEND).then(res => {
					this.recommendProduct = res.data
				})
			}
		}
	}
</script>

<style>
	.product-price-num {
		line-height: 1;
		margin-left: 10upx;
		font-size: 32upx;
		font-weight: 800;
		color: #FE0036;
	}

	.product-price-rmb {
		color: #FE0036;
		line-height: 1;
	}

	.product-price {
		margin-top: 10upx;
		align-items: flex-end;
	}

	.product-name {
		width: 100%;
		color: #333333;
		font-weight: 800;
		margin-top: 15upx;
	}

	.product-image {
		width: 330upx;
		height: 330upx;
	}

	.product-item-right {
		width: 330upx;
		border-radius: 20upx;
		overflow: hidden;
		flex-direction: column;
		margin-left: 30upx;
		margin-top: 30upx;
		padding-bottom: 30upx;
	}

	.product-item-left {
		width: 330upx;
		border-radius: 20upx;
		overflow: hidden;
		flex-direction: column;
		margin-top: 30upx;
		padding-bottom: 30upx;
	}

	.product-view {
		flex-wrap: wrap;
		padding: 30upx;
		box-sizing: border-box;
		width: 100%;
	}

	.recommend-top .font {
		color: #333333;
		font-size: 32upx;
		margin: 15upx;
	}

	.recommend-view {
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: 30upx;
	}

	.line {
		width: 50upx;
		height: 3upx;
		background-color: #F2F3F5;
	}

	.recommend-top {
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 20upx 0;
	}

	.button-view {
		margin-top: 40upx;
	}

	.success-font view {
		margin-left: 20upx;
		font-size: 35upx;
		color: #555555;
	}

	.success-icon {
		width: 50upx;
		height: 50upx;
	}

	.success-font {
		align-items: center;
		margin-top: 30upx;
	}

	.success-view {
		width: 100%;
		align-items: center;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 30upx 0;
	}

	.button-back {
		height: 70upx;
		width: 180upx;
		border-radius: 70upx;
		align-items: center;
		justify-content: center;
		border: 3upx solid #F95706;
		color: #F95706;
		font-size: 30upx;
		margin: 0 15upx;
	}

	.button-query {
		height: 70upx;
		width: 180upx;
		border-radius: 70upx;
		align-items: center;
		justify-content: center;
		background-color: #F95706;
		color: #FFFFFF;
		font-size: 30upx;
		margin: 0 15upx;
	}
</style>
